<!--
 	* @author  dumeng
-->
<template>
  <div class="select-course">
    <el-dialog v-el-drag-dialog :close-on-click-modal="false" :visible.sync="visible" title="选择课程" fullscreen center>
      <section class="select-inner">
        <div class="app-container course-container">
          <el-collapse-transition>
            <div v-show="searchshow" class="course-search merge">
              <span class="svg-container">
                <svg-icon icon-class="search" />
              </span>
              <el-input
                v-model="listQuery.anyThing"
                :placeholder="$t('table.course.search')"
                class="search-input"
                @keyup.enter.native="handleFilter"
              />
              <div class="course-search-btn">
                <el-button class="filter-item" type="primary" @click="handleFilter">搜索</el-button>
                <el-button class="filter-item" type="primary" @click="resettingBtn">重置</el-button>
                <span class="course-search-more" @click="searchshow = !searchshow">
                  更多筛选条件
                  <i class="el-icon-arrow-down" />
                </span>
              </div>
            </div>
          </el-collapse-transition>
          <el-collapse-transition>
            <div v-show="!searchshow" class="course-search separate">
              <div class="course-search-inner">
                <el-row>
                  <el-col :span="8">
                    <div class="search-inner-item">
                      <div class="item-label">课程名称</div>
                      <el-input
                        v-model.trim="search.subjectName"
                        style="width: 80%;"
                        class="filter-item"
                        placeholder="请输入课件名称搜索"
                      />
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="search-inner-item">
                      <div class="item-label">课程分类</div>
                      <el-cascader ref="classify" v-model="search.subjectClassify" style="width:80%" clearable :props="classifyProps" :options="classifyOptions" />
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="search-inner-item">
                      <div class="item-label">课程来源</div>
                      <el-input
                        v-model.trim="search.subjectSource"
                        style="width: 80%;"
                        class="filter-item"
                        placeholder="请输入课程来源搜索"
                      />
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="search-inner-item">
                      <div class="item-label">课程类型</div>
                      <el-select v-model="search.subjectType" placeholder="请选择课程类型搜索" style="width: 80%;">
                        <el-option v-for="(item, index) in dict.KCLX" :key="index" :label="item.dictName" :value="item.dictValue" />
                      </el-select>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="search-inner-item">
                      <div class="item-label">关键词</div>
                      <el-input
                        v-model.trim="search.subjectKeyword"
                        style="width: 80%;"
                        class="filter-item"
                        placeholder="请输入关键词搜索"
                      />
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div class="course-search-btn">
                <el-button type="primary" @click="handleFilter">搜索</el-button>
                <el-button class="filter-item" type="primary" @click="resettingBtn">重置</el-button>
                <span class="course-search-more" @click="searchshow = !searchshow">
                  精简筛选条件
                  <i class="el-icon-arrow-up" />
                </span>
              </div>
            </div>
          </el-collapse-transition>
          <div v-loading="listLoading" class="course-list">
            <el-row v-if="courseList.length > 0">
              <el-col v-for="item in courseList" :key="item.id" :span="5">
                <div class="course-list-item">
                  <div class="item-title etc">
                    <el-radio v-model="checkCourse" :label="item.id">{{ item.subjectName || '' }}</el-radio>
                  </div>
                  <div :class="sidebar.opened ? 'o' : 'c'" class="item-img">
                    <img v-if="item.subjectImg" :src="view + item.subjectImg">
                    <div v-if="item.status == 'KCZT02'" class="pub">
                      <span>未上架</span>
                    </div>
                  </div>
                  <p class="item-mark etc">简介：{{ item.subjectIntroduce || '' }}</p>
                  <div class="item-tag">关键词：{{ item.subjectKeyword }}</div>
                </div>
              </el-col>
            </el-row>
            <el-row v-else class="nodata-row">
              <div class="nodata">
                <img src="../images/nodata.png">
              </div>
            </el-row>
          </div>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
            @pagination="getList"
          />
        </div>
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="handleCancel()">关 闭</el-button>
        <el-button type="primary" style="padding: 8px 30px;" @click="handleComit()">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { fetchList, deleteCourse, getClassifyTree, getDictByCode } from '@/views/skill/course/api/index'
import { mapGetters } from 'vuex'
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
export default {
  name: 'SelectCourse',
  directives: { elDragDialog },
  components: { Pagination },
  data() {
    return {
      visible: true,
      listLoading: false,
      list: null,
      total: 0,
      searchshow: true,
      search: {
        subjectName: '',
        subjectClassify: '',
        subjectKeyword: '',
        subjectSource: '',
        subjectType: ''
      },
      classifyProps: {
        label: 'classifyName',
        value: 'id',
        checkStrictly: true
      },
      classifyOptions: [],
      listQuery: {
        page: 1,
        limit: 10,
        anyThing: ''
      },
      checkCourse: '',
      courseList: [],
      view: '/API-DOCUMENT/document/file/download?id=',
      dict: {
        KCZT: [],
        KCLX: [] // 课程类型
      }
    }
  },
  computed: {
    ...mapGetters([
      'sidebar'
    ])
  },
  created() {
    this.getClassifyOption()
    for (const key in this.dict) {
      this.getDict(key)
    }
    this.getList()
  },
  methods: {
    handleCancel() {
      this.$emit('cancel')
    },
    handleComit() {
      if (this.checkCourse) {
        const obj = this.courseList.filter(item => { return item.id === this.checkCourse })[0]
        this.$emit('success', obj)
      } else {
        this.$message({
          showClose: true,
          message: '请选择课程！',
          type: 'warning'
        })
      }
    },
    /**
			 * 获取课程分类
			 */
    getClassifyOption() {
      return new Promise((resolve, reject) => {
        getClassifyTree({ classifyType: 'JNZQFL01' }).then(({ data }) => {
          this.classifyOptions = data.data || []
        }).catch(error => {
          reject(error)
        })
      })
    },
    /**
			 * 获取字典
			 */
    getDict(code) {
      return new Promise((resolve, reject) => {
        getDictByCode(code).then(res => {
          this.dict[code] = (res.data.data && res.data.data.length > 0) ? res.data.data[0].list : []
          if (this.state === 'update' && code === 'KCLX') {
            this.getData(this.$route.query.i)
          }
        }).catch(error => {
          reject(error)
        })
      })
    },
    getList(obj) {
      this.listLoading = true
      var query = {
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit,
        status: 'KCZT01'
      }
      if (this.searchshow) {
        query['anyThing'] = this.listQuery.anyThing
      } else {
        query['subjectName'] = this.search.subjectName
        query['subjectClassify'] = this.search.subjectClassify.length > 0 ? this.search.subjectClassify[this.search.subjectClassify.length - 1] : ''
        query['subjectKeyword'] = this.search.subjectKeyword
        query['subjectSource'] = this.search.subjectSource
        query['subjectType'] = this.search.subjectType
      }
      return new Promise((resolve, reject) => {
        fetchList(query).then(response => {
          this.courseList = response.data.data.rows
          this.total = response.data.data.total
          this.listLoading = false
        }).catch(error => {
          this.listLoading = false
          reject(error)
        })
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    resettingBtn() {
      this.listQuery.anyThing = ''
      for (const i in this.search) {
        this.search['' + i + ''] = ''
      }
      this.listQuery.page = 1
      this.getList()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .select-course {
    position: relative;
    .select-inner {
      max-height: calc(100vh - 130px);
      min-height: calc(100vh - 130px);
      position: relative;
      // &::after {
      //   content: '';
      //   height: 1px;
      //   background-color: #e2e3e8;
      //   position: absolute;
      //   bottom: 0;
      //   left: -20px;
      //   right: -20px;
      // }
    }
    $dark_gray: #bfced6;
    $mainColor: #18a5fd;
    .course-container {
      .course-search {
        background-color: #fff;
        padding: 0 20px;
        .svg-container {
          padding: 0 5px 0 10px;
          color: $dark_gray;
          vertical-align: middle;
          display: inline-block;
          &_login {
            font-size: 20px;
          }
        }
        .search-input {
          width: 60%;
          position: relative;
          &:after {
            content: "";
            position: absolute;
            left: -25px;
            right: 0;
            bottom: 8px;
            height: 1px;
            background: rgba(226, 227, 232, 1);
          }
          input {
            outline: none;
            background: transparent;
            border: none;
            outline: medium;
            padding: 0;
            &:focus {
              outline: none;
              background-color: transparent;
            }
          }
        }
        .course-search-btn {
          display: inline-block;
          float: right;
          .el-button.is-round {
            padding: 10px 30px;
            margin-right: 34px;
          }
          .course-search-more {
            font-size: 14px;
            font-weight: 500;
            color: $mainColor;
            cursor: pointer;
          }
        }
        &.merge {
          height: 50px;
          line-height: 50px;
        }
        &.separate {
          .course-search-inner {
            padding-top: 10px;
            .search-inner-item {
              .item-label {
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                color: #a6a6a6;
                font-weight: 400;
              }
              .el-input {
                position: relative;
                .el-input__inner {
                  border: none;
                  padding: 0;
                }
                &:after {
                  content: "";
                  height: 1px;
                  background-color: #e2e3e8;
                  position: absolute;
                  left: 0;
                  right: 0;
                  bottom: 0;
                }
              }
            }
          }
          .course-search-btn {
            text-align: center;
            display: block;
            float: none;
            height: 56px;
            line-height: 56px;
          }
        }
      }
      .course-classify {
        display: flex;
        background-color: #fff;
        margin-top: 10px;
        margin-bottom: 10px;
        .course-classify-inner {
          flex: 1;
          .inner-item {
            position: relative;
            ul {
              padding: 5px 20px;
              margin: 0;
              box-shadow: 0 5px 10px rgba(254, 90, 97, 0.05);
              max-height: 50px;
              transition: all 1s ease;
              overflow: hidden;
              li {
                list-style-type: none;
                display: inline-block;
                padding: 6px 12px;
                font-size: 14px;
                font-family: PingFangSC-Medium;
                font-weight: 500;
                color: rgba(51, 51, 51, 1);
                margin: 5px;
                cursor: pointer;
                &:first-child {
                  margin: 0;
                  padding: 0;
                  color: #a6a6a6;
                }
                &.active {
                  color: $mainColor;
                  background: #eaf7ff;
                  border-radius: 17px;
                }
              }
              &.toggle {
                max-height: 300px;
              }
            }
            span {
              position: absolute;
              right: 10px;
              top: 12px;
              color: $mainColor;
              cursor: pointer;
              font-size: 20px;
            }
          }
        }
        .course-classify-btn {
          position: relative;
          width: 150px;
          .el-button {
            position: absolute;
            top: 50%;
            margin-top: -15px;
            left: 50%;
            margin-left: -49px;
          }
        }
      }
      .course-btn {
        display: flex;
        height: 46px;
        line-height: 46px;
        width: 100%;
        .btn-title {
          flex: 1;
          font-size: 16px;
          font-weight: bold;
          color: rgba(51, 51, 51, 1);
        }
      }
      .course-list {
        .el-row {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          flex-wrap: wrap;
          align-content: flex-start;
          .el-col-5 {
            width: 20%;
          }
        }
        .nodata-row.el-row {
          justify-content: center;
        }
        .course-list-item {
          background-color: #ffffff;
          padding: 10px 10px 0;
          margin-right: 10px;
          margin-top: 10px;
          box-shadow: 0 5px 10px rgba(254, 90, 97, 0.05);
          position: relative;
          .delete-item{
            position: absolute;
            top: 8px;
            right: 6px;
          }
          .item-preview{
            position: absolute;
            top: 8px;
            right: 26px;
          }
          .item-title {
            margin-bottom: 10px;
            padding-right: 20px;
            .el-checkbox {
              font-size: 14px;
              color: #333333;
              .el-checkbox__input.is-checked .el-checkbox__inner,
              .el-checkbox__input.is-indeterminate .el-checkbox__inner {
                background-color: $mainColor;
                border-color: $mainColor;
              }
              .el-checkbox__input.is-checked + .el-checkbox__label {
                color: $mainColor;
              }
            }
          }
          .item-img {
            width: 100%;
            height: 150px;
            overflow: hidden;
            position: relative;
            &.o {
              height: 130px;
            }
            .pub {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background: rgba(0, 0, 0, .5);
              z-index: 1;
              display: flex;
              align-items: center;
              justify-content: center;
              span {
                font-size: 16px;
                color: #ffffff;

              }
            }
            img {
              width: 100%;
              height: 100%;
            }
          }
          .item-mark {
            font-size: 12px;
            color: #a6a6a6;
            margin: 5px 0;
            line-height: 1.5;
            min-height: 20px;
          }
          .item-tag {
            height: 20px;
            line-height: 20px;
            color: #a6a6a6;
            font-weight: 400;
            font-size: 12px;
          }
          .item-btns {
            display: flex;
            margin-top: 10px;
            position: relative;
            .el-button {
              flex: 1;
              span {
                font-size: 14px;
                font-weight: 500;
              }
            }
            &:before {
              content: "";
              position: absolute;
              top: 0;
              left: -10px;
              right: -10px;
              height: 1px;
              background-color: #e2e3e8;
            }
          }
        }
      }
      .pagination-container {
        background: none;
      }
    }
  }
</style>
